<template>
  <yk-drawer placement="right" :show="active" @close="closes">
    <template #header>
      <h2>
        <IconBulbOutline />
        私信{{ count }}
        <yk-tag v-show="unreadCount !==0"> {{ unreadCount }} 未读</yk-tag>
      </h2>

    </template>
    <yk-space dir="vertical">
      <Reply v-for="item in messages" :key="item.id" :content="item" :isComment="false" @delete="deleteMessage"
        @toRead="changetoRead" />
    </yk-space>
    <template #footer>
      <yk-pagination :total="count" simple @change="changePage" :default-page-size="props.pageSize" />
    </template>
  </yk-drawer>
</template>
<script setup lang="ts">
import { toRef } from 'vue';
import type { InformationProps } from './reply';
import { ref,watch, getCurrentInstance } from 'vue';
// import { comment } from "../../mock/data"
import { useUserStore } from "../../stores/user";
import { useCode } from "../../hooks/codeHook";
import { getMessageApi, deleteMessageApi, updateMessageApi, getUnreadMessageApi } from "../../api/message_api";


const { tackleCode } = useCode();
const userStore = useUserStore();

const proxy: any = getCurrentInstance()?.proxy;//获取消息框实例
const props = withDefaults(defineProps<InformationProps>(), {
  active: false,
  pageSize: 8,  
})

const emits = defineEmits(['close', 'unreadCount'])

const active = toRef(props, 'active');
const closes = () => {
  emits('close', false);
}
//总数
const count = ref<number>(123)
//数据内容
const messages = ref();
//请求
type Request = {
  token?: string,
  pageSize: number,//每页多少条数据
  nowPage: number,//当前页码
  count?: boolean
}

const request: Request = {
  pageSize: props.pageSize,
  nowPage: 1,
  token: userStore.token,
}

//获取数据
const drwMessageData = (e: boolean) => {
  request.count = e;
  getMessageApi(request).then((res: any) => {
    if (tackleCode(res.data.code)) {
      let data = res.data.data;
      if (data.count !== -1) {
        count.value = data.count; //总条数
      }
      messages.value = data.result;
    }
  })
}

//翻页
const changePage = (page: number) => {
  request.nowPage = page;
  drwMessageData(false);
}

//删除私信
const deleteMessage = (id: number) => {
  let request = {
    token: userStore.token,
    id: id,
  }
  deleteMessageApi(request).then((res: any) => {
    if (tackleCode(res.data.code)) {
      messages.value = messages.value.filter((item: any) => item.id !== id)
      drwMessageData(true)
      proxy.$message({ type: "success", message: "删除私信成功" })
    }
  })
}

//状态改变为已读
const changetoRead =  (id: number) => {
  //发送请求改变状态为已读
  let request = {
    token: userStore.token,
    id: id,
  }
  updateMessageApi(request).then( (res: any) => {
    if (tackleCode(res.data.code)) {
      //处理前端的已读
      messages.value.find((item: any) => item.id === id).isread = 1;
      //更新未读消息条数
       getUnreadMessageCount();
    }
    else {
      proxy.$message({ type: "error", message: "状态改变失败" })
    }
  })
  //更新未读消息条数
  
}

//获取未读消息条数
const unreadCount = ref<number>(0)
const getUnreadMessageCount = () => {
  let request = {
    token: userStore.token,
  }
  getUnreadMessageApi(request).then((res: any) => {
    if (tackleCode(res.data.code)) {
      let data = res.data.data[0];
      unreadCount.value = data.count; //总条数
      emits('unreadCount',  unreadCount.value)
    }
  })
}
// 监听active变化，当变为true时加载数据
watch(active, (newVal) => {
  if (newVal) {
    drwMessageData(true);
    getUnreadMessageCount();
  }
});

</script>
<style scoped lang="less"></style>